<template>
  <div class="right-top-right-content">
    <div class="logContent">
      <div class="log_path_content">
        <el-tooltip :content="playLogFilePath">
          <div class="logContent-title">播放日志文件位置:
            <el-button type="primary" size="mini" @click="openLogDir(playLogFilePath)">打开</el-button>
          </div>
        </el-tooltip>
        <el-tooltip :content="generateAudioPath">
          <div class="logContent-title">音频文件位置:
            <el-button type="primary" size="mini" @click="openLogDir(generateAudioPath)">打开</el-button>
          </div>
        </el-tooltip>
      </div>
      <div class="audioGen_content">
        <div class="title">
          当字数超过:
          <el-input-number size="mini" v-model="audioSetting.audioGen.maxCharLength" :step="1" />
          跳过
          <el-button style='margin-left: 10px;' :type="isMuting ? 'danger' : 'primary'" @mousedown.native="startMute"
            @mouseup.native="endMute" @touchstart.native.prevent="startMute" @touchend.native.prevent="endMute">
            {{ isMuting ? '避音中...' : '按住避音' }}
          </el-button>
          <el-tooltip content="清理音频文件及播放日志">
            <el-button type="primary" size="medium" @click="clearLog">清理文件</el-button>
          </el-tooltip>
        </div>
      </div>
      <el-table @row-click="rowClick" ref="logContentTable" :data="playLogList" height="calc(100% - 72px)" border>
        <el-table-column align="center" prop="content" label="播放日志"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { EventBus } from '@/event-bus.js';
import { getPosition } from '@/api/sys/config';
import { openFolder, clearLog } from '@/api/common/assistant';
import { realTimeChangeVolumn, startMute, endMute } from '@/api/live/live';

export default {
  name: 'RightTopRight',
  components: {
  },
  data() {
    return {
      maxTableSize: 100,
      playLogList: [],
      playLogFilePath: "",
      generateAudioPath: "",
      isMuting: false,
      muteBtnType: 'primary'
    };
  },
  created() {
    getPosition().then(res => {
      this.playLogFilePath = res.result.playLogFilePath;
      this.generateAudioPath = res.result.generateAudioPath;
    }).catch((e) => {
      console.error(e)
    });
    EventBus.$on("playLogEvent", (message) => {
      this.playLogList.push({
        index: this.playLogList.length,
        content: message
      });
      if (this.playLogList.length > this.maxTableSize) {
        this.playLogList.shift();
      }
      this.$nextTick(() => {
        this.scrollToBottom('logContentTable');
      });
    });
    EventBus.$on("changeLiveStatus", (status) => {
      if (status == 1) {
        this.playLogList = [];
      }
    });
  },
  mounted() {
  },
  beforeDestroy() {
    EventBus.$off('playLogEvent');
    EventBus.$off('changeLiveStatus');
  },
  computed: {
    audioSetting() {
      return this.pageConfig.audioSetting;
    },
    pageConfig() {
      return this.$store.state.page.config;
    }
  },
  methods: {
    startMute() {
      if (!this.isMuting) {
        this.isMuting = true
        this.muteBtnType = 'danger';
        startMute().then((res) => {

        })
      }
    },
    endMute() {
      if (this.isMuting) {
        this.isMuting = false
        this.muteBtnType = 'primary';
        endMute().then((res) => {
        })
      }
    },
    clearLog() {
      clearLog().then((res) => {
        if (res.code == 200) {
          this.$modal.msgSuccess('清理成功');
        } else {
          this.$modal.msgError('清理失败');
        }
      });
    },
    openLogDir(path) {
      openFolder({ path: path }).then((res) => {
        if (res.code == 200) {
          this.$modal.msgSuccess('打开成功');
        } else {
          this.$modal.msgError('打开失败');
        }
      });
    },
    rowClick(row) {
      this.$modal.notifySuccess(row.content);
    },
    scrollToBottom(tableRefName) {
      const table = this.$refs[tableRefName];
      if (table) {
        const bodyWrapper = table.$el.querySelector('.el-table__body-wrapper');
        if (bodyWrapper) {
          bodyWrapper.scrollTop = bodyWrapper.scrollHeight;
        }
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.right-top-right-content {
  width: 500px;
  border: 1px solid var(--color-border-first);
  border-left: 0px;

  .logContent {
    overflow-y: auto;
    height: 100%;
    padding: 10px;
    padding-bottom: 0px;
    max-height: 375px;

    .log_path_content {
      display: flex;
      margin-bottom: 5px;

      .logContent-title {
        flex: 1;
      }
    }

    .audioGen_content {
      margin-bottom: 5px;
    }

    .logItem {
      border: 1px solid var(--color-border-second);
      padding: 5px;

      &:nth-last-child(n+2) {
        margin-bottom: 5px;
      }
    }
  }
}
</style>
